<template>
  <div class="inside-comment">
    <div class="layout">
      <div class="screening " v-if="noticeSetting?.noticePattern == '1'">
        <div class="screen-item" v-for="item in screeningCondition" :key="item.id">
          <div class="name">{{item.name}}：</div>
          <ul>
            <li v-for="kid in item.data" :key="kid.id"  :class="isChecked(item.name, kid.id, item.multipleChoice)  ? 'cur' : ''"
            @click="changeCheck(item.name, kid.id)">{{kid.name}}</li>
          </ul>
        </div>
        <el-divider style="margin-bottom: 15px;"/>
        <div class="search-layer layer-item">
          <el-input v-model="keyWords" class="notice-name" placeholder="请输入公告关键词" style="width: 300px;" @keyup.enter="addKeyWord"/>
          <el-button class="doc-search-btn" type="primary" @click="addKeyWord">搜索</el-button>
          <el-button class="reset-btn" type="primary" @click="resetFilter"><el-icon><Refresh /></el-icon><span>重置筛选</span></el-button>
        </div>
      </div>
      <div class="check-screen" v-if="noticeSetting?.noticePattern == '1'">
        <div class="left-box">
          <div class="name" >已选条件：</div>
          <ul>
            <div v-for="(ids, name) in checkList" :key="name" class="multiple-choice">
              <div v-for="id in ids" :key="id" class="multiple-choice-item">
                <li v-if="getConditionName(name, id)!== '全部'" class="choice-li">
                  <span>{{ getConditionName(name, id) }}</span>
                  <el-icon @click="delCheck(name, id)">
                    <CloseBold />
                  </el-icon>
                </li>
              </div>
            </div>
            <li v-if="queryData.keyWords && queryData.keyWords != ''" class="choice-li keyword">
              <span>{{ queryData.keyWords }}</span>
              <el-icon @click="delKeyWord">
                <CloseBold />
              </el-icon>
            </li>
          </ul>
          
        </div>
        <div class="right-box">
          共<span>{{queryData.total}}</span>条数据
        </div>
      </div>
      <div class="top-check" v-else>
        <SearchCmp
          :searchCmpArray="searchCmpArray"
          :searchForm="queryData"
          @onSubmit="getNotice"
        />
        <div class="right-box">
          共<span>{{queryData.total}}</span>条数据
        </div>
      </div>
     
      <div class="notice-list" v-if="tableData && tableData.length > 0">
        <div class="notice-item" v-for="item in tableData" :key="item.id" @click="showDetail(item)">
          <div class="title">{{item.title}}</div>
          <div class="time">{{ formatDate(item.publishTime,"yyyy-MM-dd") }}</div>
        </div>
      </div>
      <div class="ruifox-table-new-no-data" v-else>
        <slot name="noTableData">
          <!-- <i class="iconfont">&#xe642;</i> -->
          <svg t="1728460685872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" width="70" height="70"><path d="M103.424 621.632h13.632c3.84 0 5.76 3.968 5.76 7.872 0 3.84-3.904 5.888-5.76 5.888h-13.632v13.696c0 3.776-4.032 5.76-5.888 5.76-1.92 0-3.904 0-5.888-1.984-1.92-1.856-1.92-1.856-1.92-3.776v-13.696h-13.696c-3.84 0-5.824-4.032-5.824-5.888 0-3.968 3.904-7.872 5.824-7.872h13.696v-13.696c0-3.904 3.904-5.824 7.808-5.824 3.84 0 5.888 1.92 5.888 5.824v13.696z m903.04-54.528v-13.76c0-1.856 0-4.032-1.856-4.032-2.048-1.856-3.904-1.856-5.952-1.856-3.904 0-5.824 1.856-5.824 5.888v13.76h-13.696c-1.92 0-3.968 0-5.76 1.728-1.984 2.112-1.984 4.032-1.984 5.888 0 4.032 3.84 6.08 5.824 6.08h13.76v13.568c0 3.776 3.84 5.888 5.76 5.888 4.032 0 7.872-3.968 7.872-5.888v-13.568h13.568c3.84 0 5.824-3.968 5.824-6.08 0-3.776-3.84-7.616-5.888-7.616h-11.648z m-497.344 224.192H163.776a13.888 13.888 0 0 1-9.728-3.968 14.592 14.592 0 0 1-3.84-9.728c0-7.808 5.824-13.504 13.568-13.504h62.4a63.296 63.296 0 0 1-7.744-27.392V340.736c0-13.632 5.888-29.248 15.616-38.976a54.144 54.144 0 0 1 38.976-15.616h41.024v-13.632c0-13.696 5.76-29.312 15.616-39.04a54.592 54.592 0 0 1 39.04-15.616h329.6c13.696 0 29.312 5.888 38.976 15.616a54.656 54.656 0 0 1 15.68 39.04v397.888a45.824 45.824 0 0 1-7.936 27.456h76.032c7.808 0 13.76 5.632 13.76 13.568a13.44 13.44 0 0 1-13.76 13.568h-163.84v13.632a44.544 44.544 0 0 1-7.68 27.392h7.68c7.936 0 13.76 5.824 13.76 13.568a13.44 13.44 0 0 1-13.76 13.76H585.088a26.688 26.688 0 0 1-3.84 33.088 25.024 25.024 0 0 1-19.456 7.936 25.024 25.024 0 0 1-19.584-7.936l-33.088-35.136z m50.624-27.2h43.008a26.816 26.816 0 0 0 27.328-27.392V338.816c0-15.616-11.84-27.328-25.536-27.328h-331.52a27.84 27.84 0 0 0-27.2 27.328v397.952c0 15.616 11.584 27.392 27.2 27.392h208.704l-7.808-7.936a29.184 29.184 0 0 1-7.808-27.392l-13.696-13.568a98.688 98.688 0 0 1-130.624-13.568 96.32 96.32 0 0 1 3.84-130.688 96.384 96.384 0 0 1 130.816-3.904c38.912 33.152 44.8 89.536 13.696 130.752l13.568 13.568a28.928 28.928 0 0 1 27.264 7.68l48.768 44.992z m97.536-68.288h41.024a26.688 26.688 0 0 0 27.264-27.328V270.592a26.624 26.624 0 0 0-27.264-27.328H370.56a26.624 26.624 0 0 0-27.2 27.328v15.616h259.456c13.632 0 29.184 5.824 38.848 15.616a54.272 54.272 0 0 1 15.616 38.976v355.008zM175.552 192.512h19.456c5.888 0 9.728 3.904 9.728 9.728s-3.84 9.792-9.728 9.792h-19.456v19.456c0 5.888-3.904 9.792-9.728 9.792-2.048 0-5.888-1.92-7.872-3.904s-1.92-3.904-1.92-7.808v-19.456h-21.44c-1.984 0-5.888 0-7.808-3.904-2.048-1.984-3.968-3.904-3.968-7.808 0-5.888 3.968-9.728 9.728-9.728h21.44v-19.584c0-5.888 3.968-9.728 9.728-9.728 5.888 0 9.728 3.84 9.728 9.728v23.424h2.112zM13.632 777.6c0-7.808 5.824-13.504 13.568-13.504h81.92c7.936 0 13.696 5.696 13.696 13.504 0 7.872-5.76 13.696-13.696 13.696H27.2a14.016 14.016 0 0 1-9.728-3.968 14.784 14.784 0 0 1-3.84-9.728z m433.024-87.68a68.288 68.288 0 0 0 0-97.536 68.288 68.288 0 0 0-97.536 0 68.352 68.352 0 0 0 0 97.536 68.16 68.16 0 0 0 97.536 0zM302.272 368.064c0-7.808 5.888-13.632 13.632-13.632h150.208a13.44 13.44 0 0 1 13.696 13.632 13.376 13.376 0 0 1-13.696 13.696H315.968a15.104 15.104 0 0 1-9.728-3.968c-3.968-3.84-3.968-7.744-3.968-9.728z m0 68.288c0-7.808 5.888-13.632 13.632-13.632H534.4a13.44 13.44 0 0 1 13.824 13.632 13.44 13.44 0 0 1-13.824 13.696H315.968a15.04 15.04 0 0 1-9.728-3.904c-3.968-3.968-3.968-5.824-3.968-9.792z m0 68.288c0-7.872 5.888-13.696 13.632-13.696H411.52a13.44 13.44 0 0 1 13.632 13.696 13.312 13.312 0 0 1-13.632 13.632H315.968a14.72 14.72 0 0 1-9.728-3.968c-3.968-1.856-3.968-5.76-3.968-9.664zM40.896 422.72c-15.616 0-27.264-7.808-35.072-21.44-7.808-13.632-7.808-29.312 0-40.96a40.896 40.896 0 0 1 35.072-21.44c23.488 0 41.024 17.536 41.024 40.96 0 23.296-17.536 42.88-41.024 42.88z m0-21.44a20.416 20.416 0 0 0 17.536-9.728 17.856 17.856 0 0 0 0-19.584c-3.84-7.872-9.728-11.712-17.536-11.712a21.632 21.632 0 0 0-21.376 21.504c1.92 11.648 9.792 19.52 21.376 19.52z m850.496-60.544c-15.552 0-29.44-7.744-35.072-21.44a38.464 38.464 0 0 1 0-40.96c7.68-11.776 21.376-21.44 35.072-21.44 23.36 0 40.96 17.536 40.96 40.96-0.064 23.424-19.456 42.88-40.96 42.88z m0-21.44a20.736 20.736 0 0 0 17.536-9.728c3.968-5.888 3.968-13.696 0-21.44a20.48 20.48 0 0 0-17.536-9.728 21.568 21.568 0 0 0-21.44 21.376c0 9.792 9.728 19.52 21.44 19.52z m0 0" fill="#515151" p-id="8473"></path></svg>
          <span>暂无数据</span>
        </slot>
      </div>
      <!-- <PaginationView :canChoose="false" :total="queryData.total" :pageSize="queryData.pageSize" :currentPage="queryData.currentPage" 
         :pageChoose="isPageChooseBtn" :checkedNum="checkedNum" @changeSize="handleSizeChange" 
        @currentChange="handleCurrentChange" @changePageChoose="handlePageChoose" @changeAllChoose="handleAllChoose" 
        @invertChoose="handleInvertChoose" @refreshList="getNotice" /> -->
      <PaginationView
        :total="queryData.total"
        :pageSize="queryData.pageSize"
        :currentPage="queryData.currentPage"
        :allChoose="isAllChooseBtn"
        :pageChoose="isPageChooseBtn"
        :options="batchOptions"
        :checkedNum="checkedNum"
        :canChoose="false"
        @changeSize="handleSizeChange"
        @currentChange="handleCurrentChange"
        @changePageChoose="handlePageChoose"
        @changeAllChoose="handleAllChoose"
        @invertChoose="handleInvertChoose"
        @checkOption="handleBatchOptions"
        @refreshList="getNotice"
        @cancelChoose="handleResetPagination"
      />
    </div>
  </div>
  <!-- 提示绑定企业  -->
  <el-dialog v-model="userBound" title="提示" width="400px">
    <div>您还未绑定企业信息，请前往绑定！</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="userBound = false">暂不绑定</el-button>
        <el-button type="primary" @click="toBound">去绑定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, watch, onMounted, onBeforeMount, nextTick, computed } from 'vue'
import { CloseBold } from "@element-plus/icons-vue";
import { useRoute, useRouter } from 'vue-router';
import { Refresh } from '@element-plus/icons-vue';
import { selectPageProvider, checkUser } from '@/api/supplier'
import { tableList as mixTable } from "@ruifox-cms/utils";
import { formatDate } from '@/utils/tools'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const noticeSetting = ref()
const typeOptions = ref()

const settingNoticePattern = computed(() => {
  return store.state.setting.setting;
});
// 当 store 中的数据变化时更新 noticePattern
watch(settingNoticePattern, (newValue) => {
  if (newValue !== undefined && newValue !== null) {
    noticeSetting.value = newValue;
    typeOptions.value = newValue.noticeType.map(item => ({
        value: item.noticeTypeId,  // 将 noticeTypeId 映射为 value
        label: item.value           // 将 value 映射为 label
    }));
    // searchCmpArray.value[0].options = typeOptions.value;
    console.log('typeOptions.value', typeOptions.value);
    console.log('noticeSetting 更新为:', noticeSetting.value);
  }
});
// const getSetting = async () => {
//   noticePattern.value = settingNoticePattern
//   console.log("noticePattern",noticePattern.value);
//   console.log("noticePattern == '1'",noticePattern.value == "1");
// }

const route = useRoute()
const router = useRouter();
console.log("store.state.setting.setting.noticeType",store.state.setting.setting.noticeType);

const stateOptions = ref([
  {
    label: '全部',
    value: "",
  },
  {
    label: '未开始',
    value: 1,
  },
  {
    label: '报名中',
    value: 2,
  },
  {
    label: '已结束',
    value: 3,
  },
])
const timeOptions = ref([
  {
    label: '全部',
    value: "",
  },
  {
    label: '今天',
    value: getTimeRange('day', 0),
  },
  {
    label: '近三天',
    value: getTimeRange('day', 2),
  },
  {
    label: '近一周',
    value: getTimeRange('day', 6),
  },
  {
    label: '近一月',
    value: getTimeRange('month', 1),
  },
])
const searchCmpArray = ref([
  { label: '公告类型', key: 'type', form_type: 'select', options: typeOptions.value },
  { label: '项目状态', key: 'projectState', form_type: 'select', options: stateOptions.value },
  { label: '时间范围', key: 'publishTimeRange', form_type: 'select', options: timeOptions.value },
  { label: '关键词', key: 'keyWords' },
])


//已选条件
const checkList = ref(
  {
    "公告类型": [0],
    "项目状态": [0],
    "时间范围": [0]
  }
)

// 通用的计算时间范围函数
function getTimeRange(offsetType, offsetValue) {
    const now = new Date();
    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
    const start = new Date(now);
    if (offsetType === 'day') {
        start.setDate(start.getDate() - offsetValue);
    } else if (offsetType === 'month') {
        start.setMonth(start.getMonth() - offsetValue);
    }
    start.setHours(0, 0, 0, 0);
    return formatDate(start) + "," + formatDate(end);
}
//测试筛选条件数据
const screeningCondition = ref([
  { 
    name: "公告类型",
    multipleChoice: true,
    data:
    [
      {
        id: 0,
        name: '全部',
        value: "",
        type: "公告类型"
      },
      {
        id: 1,
        name: '招标公告',
        value: 1,
        type: "公告类型"
      },
      {
        id: 2,
        name: '中标公告',
        value: 2,
        type: "公告类型"
      },
      {
        id: 3,
        name: '标书下载',
        value: 3,
        type: "公告类型"
      }
    ],
  },
  { 
    name: "项目状态",
    multipleChoice: true,
    data:
    [
      {
        id: 0,
        name: '全部',
        value: "",
        type: "项目状态"
      },
      {
        id: 1,
        name: '未开始',
        value: 1,
        type: "项目状态"
      },
      {
        id: 2,
        name: '报名中',
        value: 2,
        type: "项目状态"
      },
      {
        id: 3,
        name: '已结束',
        value: 2,
        type: "项目状态"
      },
      // {
      //   id: 4,
      //   name: '未关联项目',
      //   value: null,
      //   type: "项目状态"
      // }
    ]
  },
  { 
    name: "时间范围",
    multipleChoice: false,
    data:
    [
      {
          id: 0,
          name: '全部',
          value: "",
          type: "发布时间"
      },
      {
          id: 1,
          name: '今天',
          value: getTimeRange('day', 0),
          type: "发布时间"
      },
      {
          id: 2,
          name: '近三天',
          value: getTimeRange('day', 2),
          type: "发布时间"
      },
      {
          id: 3,
          name: '近一周',
          value: getTimeRange('day', 6),
          type: "发布时间"
      },
      {
          id: 4,
          name: '近一月',
          value: getTimeRange('month', 1),
          type: "发布时间"
      }
    ]
  }
]);

//分页器
const {
  queryData,
  tableData,
  // tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  // getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectPageProvider,
  // batchFuncApi: deleteByIdsCourse,
});

const defaultForm = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  projectState: "",
  type: "",
  publishTimeRange: "",
  keyWords: "",
})
Object.assign(queryData, defaultForm);

//获取公告数据
// const tableData = ref([])
const getNotice = async () => {
  console.log("queryData",queryData);

  const res = await selectPageProvider(queryData);
  if (res.code === 20000) {
    queryData.total = res.data.total;
    tableData.value = res.data.list;
  }
}
const addKeyWord = () => {
  queryData.keyWords = keyWords.value;
  getNotice()

}
//重置筛选
const resetFilter = () => {
  queryData.keyWords = '';
  // queryData = defaultForm;
  Object.assign(queryData, defaultForm);
  checkList.value =   {
    "公告类型": [0],
    "项目状态": [0],
    "时间范围": [0]
  }
  getNotice()
}
//筛选条件的设置 
const isChecked = (name, id, more) => {
  if (!checkList.value[name]) {
    checkList.value[name] = [0];
  }
  if (more) {
    if (id!== 0 && checkList.value[name].includes(0) && checkList.value[name].length > 1) {
      checkList.value[name] = checkList.value[name].filter(item => item!== 0);
    }
    return checkList.value[name].includes(id);
  }
  return checkList.value[name].includes(id);
};

//点击筛选条件
const changeCheck = (name, id) => {
  const condition = screeningCondition.value.find(item => item.name === name);
  if (!checkList.value[name] || id == 0) {
    checkList.value[name] = [0];
  }
  if (condition.multipleChoice) {
    if (checkList.value[name].includes(id)) {
      if (checkList.value[name].length === 1 && checkList.value[name][0] === 0) {
        return;
      }
      checkList.value[name] = checkList.value[name].filter(itemId => itemId!== id);
      if (checkList.value[name].length === 0) {
        checkList.value[name] = [0];
      }
    } else {
      if (id!== 0 && checkList.value[name].includes(0)) {
        checkList.value[name] = checkList.value[name].filter(item => item!== 0);
      }
      checkList.value[name].push(id);
    }
  } else {
    checkList.value[name] = [id];
  }
};

const getConditionName = (name, id) => {
  const condition = screeningCondition.value.find(item => item.name === name);
  return condition.data.find(item => item.id === id)?.name;
};
//关闭筛选条件
const delCheck = (name, id) => {
  checkList.value[name] = checkList.value[name].filter(itemId => itemId!== id);
  if(checkList.value[name].length === 0){
    checkList.value[name] = [0]
  }
};
//关闭关键词搜索
const keyWords = ref('')
const delKeyWord = () => {
  keyWords.value = '';
  queryData.keyWords = '';
  getNotice();
}

// 防抖函数
function debounce(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

//筛选条件改变，重新请求
const debouncedGetNotice = debounce(getNotice, 200);
watch(checkList, async (newValue) => {
  if (newValue["公告类型"][0] === 0) {
    queryData.type = [];
  } else {
    let type = newValue["公告类型"];
    queryData.type = type.join(',')
  }
  if (newValue["项目状态"][0] === 0) {
    queryData.projectState = [];
  } else {
    let projectState = newValue["项目状态"];
    queryData.projectState = projectState.join(',')
  }
  if (newValue["时间范围"][0] === 0) {
    queryData.publishTimeRange = "";
  } else {
    let publishTimeRange = screeningCondition.value[2].data.find(item => item.id === newValue["时间范围"][0]).value;
    queryData.publishTimeRange = publishTimeRange;
  }
  await nextTick(() => {
    debouncedGetNotice();
  });
}, { deep: true });

//检查用户账号状态
const userBound = ref(false);
const boundenterprise = async () => {
  // return 11
  const res = await checkUser();
  if (res.code === 20000) {
    if (res.data.isForbidden == true) {
      ElMessage.error("账号已禁用");
      return false;
    } else if (res.data.applyingNow == true) {
      ElMessage.warning("您的账号正在审核中，请耐心等待");
      return false;
    } else if (res.data.hasEnterprise == false) {
      //当前不是绑定企业页面
      if(route.path != '/bidding/user/Supplier'){
        userBound.value = true;
        return false;
      }
    } else if (res.data.hasEnterprise == true) {
      return true;
    }
  } else {
    return true;
  }
}

//跳转公告详情
const showDetail = async (item) => {
  //检查后台是否开启绑定企业后查看详情
  let isBound = true
  if(store.state.setting.setting.needEnterprise) {
    isBound = await boundenterprise()
  }
  if (!isBound) {
    return;
  }
  console.log("isBound",isBound);
  console.log(item);
  
  router.push({ 
    path: '/bidding/user/noticeDetail', 
    query: { id: item.noticeId } 
  });
}

onMounted(async() => {
  // await getSetting()
  await getNotice();
});
onBeforeMount(async () => {
  await store.dispatch('setting/getInfo')
})
</script>    
<style scoped lang="scss"> 
.screening{
  padding: $padding-medium;
  box-shadow: 0 0 10px rgba(0,0,0,.12);
  .screen-item{
    display: flex;  
    font-size: 14px;
    margin-bottom: 15px;
    .name {
      color: $black_2;
      padding: 4px 10px;
    }
  }
  ul{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: $black;
    li {
      padding: 4px 10px; 
      border-radius: 3px;
      cursor: pointer;
      &:hover {
        color: $mainColor;
      }
    }
    li.cur{
      color: white;
      background: $mainColor;

    }
  }
  
}
.search-layer{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: $black_2;
  .label{
    padding: 4px 10px;
  }
  .notice-name{
    margin-right: 15px;
  }
  .reset-btn{
    i{
      font-size: 16px;
    }
  }
}
.right-box {
  font-size: 14px;
  color: $black_2;
  span {
    color: $mainColor;
    padding: 0 3px;
    font-size: 16px;
  }
}
.check-screen{
  display: flex;
  align-items: end;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 15px;
  .left-box {
    display: flex;
    height: 30px;
    align-items: center;
    .name {
      color: $black_2;
    }
    li {
      background: $mainColor;
      color: white;
      display: flex;
      align-items: center; 
      padding: 4px 10px; 
      border-radius: 3px;
      cursor: pointer;
      li{
        padding: 0;
      }
      i{
        margin-left: 5px;
        line-height: 14px;
      }
    }
    .multiple-choice{
      display: flex;
      /* gap: 10px; */
      .multiple-choice-item+.multiple-choice-item {
        margin-left: 10px;
      }
      
    }
  }
  
  ul{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: $black;
    li {
      padding: 4px 10px; 
      border-radius: 3px;
      cursor: pointer;
      /* &:hover {
        color: $mainColor;
      } */
    }
    li.cur{
      color: white;
      background: $mainColor;

    }
  }
}
.top-check{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notice-list{
  margin-top: 20px;
  .notice-item{
    display: flex;
    align-items: center;
    font-size: 16px;
    color: $black;
    padding: 10px 0;
    border-bottom: 1px solid $borderColor;
    cursor: pointer;

    .title {
      flex: 1;
      overflow: hidden;
      white-space: nowrap; /* 禁止换行 */
      text-overflow: ellipsis;
    }
    .time{
      font-size: 14px;
      color: #666;

    }
    &:hover {
      .title {
        color: $mainColor;
      }
    }
  }
}
.ruifox-table-new-no-data{
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  height: 80px;
  svg{
    flex-shrink: 0;
    path{
      fill: #AAAAAA;
    }
  }
  &>i{
    font-size: 80px;
    color: #AAAAAA;
  }
  &>span{
    font-size: 12px;
    color: #AAAAAA;
  }
}

/* 响应式 */
@media (max-width: 960px){
  .layout{
    padding: 0 20px;
    box-sizing: border-box;
  }
  .top-check{
    display: block;
    .right-box{
      margin-top: 10px;
      display: flex;
      /* justify-content: end; */
    }
  }
  .notice-list{
    margin-top: 10px;
    .notice-item{
      .title{
        font-size: 14px;
      }
    } 
  }
}

</style>